<template>
	<view>
		<ScrollPage>
			<template #content>
				<view>
					<!-- 和顶部拉开距离 -->
					<view class="padding-10"></view>
					<template v-for="item in moreApply" :key="item.icon">
						<view class="margin-10 padding-10 solid-border-gray91 radius-10">
							<view class="flex-row align-center padding-10 solid-bottom-gray91 ">
								<text class="iconfont" :class="item.icon" style="font-size: 25px;"></text>
								<text class="padding-left-5">{{item.title}}</text>
							</view>
							<view class="padding-5">
								<template v-for="row in Math.floor(item.links.length / 2) + (item.links.length % 2 > 0 ? 1 : 0)">
                                    <view class="flex-row">
										<template v-for="link in item.links.slice((row - 1) * 2, row * 2)">
                                            <view class="flex-row flex-sub solid-border-gray101 radius-15 padding-5 margin-5" hover-class="bg-select text-white" @click="selectMenu(link.url, link.isTabBar)">
												<view>
													<!-- <image :src="link.iconPath" style="height:28px;width:28px;" mode="scaleToFill"/> -->
													 <text class="iconfont" :class="link.icon" style="font-size: 25px;"></text>
												</view>
												<view class="margin-left-10 flex-col">
													<text class="font-s28">{{link.name}}</text>
													<text class="font-s16">{{link.remark}}</text>
												</view>
											</view>
										</template>
										<!-- 如果是最后一行，并且只有一个时，需要占位一个空格 -->
										<template v-if="item.links.slice((row - 1) * 2, row * 2).length == 1 ">
                                             <view class="flex-sub  margin-5"></view>
										</template>
									</view>
								</template>
							</view>
						</view>
					</template>
				</view>
			</template>
		</ScrollPage>
	</view>
</template>
<script setup lang="ts">
import { timeout } from '@/utils/util'	
import { storeToRefs } from "pinia"	
import { switchTab,  navigate } from '@/security/router'
import { useMenusStore } from "@/store"

const menusStore = useMenusStore()
const { moreApply } = storeToRefs(menusStore)

// 页面跳转
function selectMenu(url:string, isTabBar: boolean){
   if(isTabBar){
      timeout(() => { switchTab(url) })
   }else{
	  timeout(() => { navigate(url) })
   }
}

</script>